<template>
    <div class="minebg">
        <div class="personalCenterTop">
            <div class="leftLogo">
                <img :src="logo" alt="">
            </div>
            <div id="userName">
                <p>
                    <img :src="user" alt="">
                </p>
                <span>李鲁海</span>
            </div>
            <div id="caozuo">
                <span id="logOut" >
                    退出
                </span>
            </div>
        </div>
        <div class="orderStateNav">
            <ul>
                <li>
                    <div>
                        <div class="bg"></div>
                        <span>待支付订单</span>
                    </div>
                </li>
                <li>
                    <div>
                        <div class="bg"></div>
                        <span>待支付订单</span>
                    </div>
                </li>
                <li>
                    <div>
                        <div class="bg"></div>
                        <span>待支付订单</span>
                    </div>
                </li>
                <li>
                    <div>
                        <div class="bg"></div>
                        <span>待支付订单</span>
                    </div>
                </li>
                <li>
                    <div>
                        <div class="bg"></div>
                        <span>待支付订单</span>
                    </div>
                </li>
            </ul>
        </div>
        <div class="applicationIcon">
            <ul>
                <li>
                    <div>
                        <div class="bg"></div>
                        <span>待支付订单</span>
                    </div>
                </li>
                <li>
                    <div>
                        <div class="bg"></div>
                        <span>待支付订单</span>
                    </div>
                </li>
                <li>
                    <div>
                        <div class="bg"></div>
                        <span>待支付订单</span>
                    </div>
                </li>
                <li>
                    <div>
                        <div class="bg"></div>
                        <span>待支付订单</span>
                    </div>
                </li>
                <li>
                    <div>
                        <div class="bg"></div>
                        <span>待支付订单</span>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'mine',
        data() {
            return {
                logo: require('../../assets/img/centerLogo.png'),
                user: require('../../assets/img/user.jpg')
            }
        }
    }
</script>

<style lang="less" scoped>
    @import '../common/css/home.less';
    .minebg{
        height: 100%;
        background: rgb(242,244,246);
    }
    .personalCenterTop {
        width: calc(100% - 20px);
        background: @Homecolor;
        padding: 8px 10px;
        height: 110px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        .leftLogo {
            width: 80px;
        }
        #caozuo{
            width: 80px;
            text-align: right;
            #logOut {
                font-size: 16px;
                color: #fff;
            }
        }

    }

    #userName {
        color: #fff;
        font-size: 14px;
        text-align: center;
        p {
            img {
                width: 50px;
                height: 50px;
                border-radius: 50%;
            }
        }
    }
    .orderStateNav{
        height: 70px;
        background: #ffffff;
        padding: 23px 0;
        ul{
            display: flex;
            align-items: center;
            li{
                list-style: none;
                flex:1;
                display: flex;
                justify-content: center;
                >div{
                    text-align: center;
                    .bg{
                        height: 30px;
                        width: 30px;
                        border-radius: 50%;
                        background: @Homecolor;
                        margin: 0 auto;
                        margin-bottom: 10px;
                    }
                    >span{
                        font-size: 12px;
                        color: #707070;
                    }
                }

            }
        }
    }
    .applicationIcon{
        height: 150px;
        width: 100%;
        padding: 20px 0 20px;
        background: #fff;
        margin-top: 10px;
        ul{
            display: flex;
            width: 100%;
            align-items: center;
            flex-wrap:wrap;
            li{
                list-style: none;
                flex:0 0 25%;
                display: flex;
                justify-content: center;
                margin-bottom: 15px;
                >div{
                    text-align: center;
                    .bg{
                        height: 30px;
                        width: 30px;
                        border-radius: 50%;
                        background: @Homecolor;
                        margin: 0 auto;
                        margin-bottom: 10px;
                    }
                    >span{
                        font-size: 12px;
                        color: #707070;
                    }
                }

            }
        }
    }
</style>
